import {
  NTabs,
  NTabPane,
  NDataTable,
  DataTableProps,
  NDrawer,
  NDrawerContent,
  NButton,
  NCard,
  NSpace,
  NIcon, NTag
} from "naive-ui";
import {Component, ComponentProps, Computed, Hook, Mut, VueComponent} from "vue3-oop";
import styles from './index.module.scss';
import { nicon } from "@/utils/IconUtil";
import SearchBar from "@/components/tool/SearchBar";

interface IToolbarAction{
  name: string,
  needCheck: boolean,
  inMore: boolean,
  onClick: ()=>void,

}
interface ITablePaneProps{
  name: string,
  code: string,
  default: boolean,
  showSearchBar: boolean,
  showSearchExt: boolean,
  onQuickSearch: (value:string)=>void,
  toolbarActions: IToolbarAction[],
  nDataTableProps: DataTableProps,
  onMounted: ()=>void
}
interface IProps {
  showTitle?: boolean,
  icon?: string,
  title?: string,

  tablePaneList?: ITablePaneProps[]

}
@Component()
export default class DynaTabsPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    showTitle: {default: false},
    icon: {default:"Search"},
    title: {default:"动态表格"},
    tablePaneList: {default: []},
  }

  constructor(
  ) {
    super();

  }

  @Mut() state = {
    // 高级搜索框可见状态
    searchFormVisible: false,
    // 活动分页
    activePane: this.defaultPane
  }

  @Computed() get tablePaneMap(){
    return new Map(this.props.tablePaneList?.map((item)=>{
      return [item.code,item]
    }))
  }

  @Computed() get defaultPane(){
    for(let item of (this.props.tablePaneList as ITablePaneProps[])){
      if(item.default){
        return item.code;
      }
    }
    return undefined;
  }

  @Computed() get toolBarMap(){
    return new Map(this.props.tablePaneList?.map((item)=>{
      return [item.code,<NSpace>
        {item.showSearchBar && <SearchBar class={[item.code]}
            showSenior={item.showSearchExt}
            onSearch={(value)=>{item.onQuickSearch(value)}}
        />}
        {item.toolbarActions.map((item)=>{
          return <NButton onClick={item.onClick}>{item.name}</NButton>
        })}
      </NSpace>]
    }))
  }

  // 切换高级搜索框可见状态
  toggleSearchForm=()=>{
    this.state.searchFormVisible = !this.state.searchFormVisible;
  }

  @Hook('Mounted')
  onMounted(){

  }


  // Tabs的前缀，即标题部分
  private renderPrefix=()=>{
    if(this.props.showTitle){
      return (<NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
        {{ avatar: nicon(this.props.icon as string), default: ()=>this.props.title }}
      </NTag>)
    }
  }

  // Tabs的后缀，即工具栏部分 TODO
  private renderSuffix=()=>{
    return this.toolBarMap.get(this.state.activePane as string);
  }

  // Tabs的默认插槽，即TabPane表格部分
  private renderDefault=()=>{
    return this.props.tablePaneList?.map((item)=>{
      return (<NTabPane name={item.code} tab={item.name}>
        <NDataTable
          remote
          striped
          {...item.nDataTableProps}
          onVnodeMounted={item.onMounted}
        />
      </NTabPane>)
    });
  }

  render() {
    return (
      <NTabs
        class={[styles.dyna_tabs_panel]}
        animated
        value={this.state.activePane}
        onUpdateValue={(value)=>{this.state.activePane=value}}
      >
        {{
          prefix: this.renderPrefix,
          suffix: this.renderSuffix,
          default: this.renderDefault
        }}
      </NTabs>
    )
  }
}

